---
title: Inline Loaders
description: Inline Loaders | Transloco Angular i18n
---

When working on a feature module or a library (which is common in a monorepo environment), we may want to have the translation files inside the module folder and ship them together with it.
To enable this feature, Transloco supports `scope` with inline loaders. We can pass the scope name and an inline loader that leverages Webpack import function to lazy load the local translation files.

Let's say we have the following Angular CLI project:

```bash
📦projects
 ┗ 📂feature-module
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂lib
 ┃ ┃ ┃ ┣ 📂i18n
 ┃ ┃ ┃ ┃ ┣ 📜en.json
 ┃ ┃ ┃ ┃ ┗ 📜es.json
 ┃ ┃ ┃ ┣ 📜feature-module.component.ts
 ┃ ┃ ┃ ┣ 📜feature-module.module.ts
 ┃ ┃ ┃ ┗ 📜feature-module.service.ts
 ┃ ┃ ┣ 📜public-api.ts
📦src
 ┣ 📂app
 ┃ ┣ 📜app-routing.module.ts
 ┃ ┣ 📜app.component.css
 ┃ ┣ 📜app.component.html
 ┃ ┣ 📜app.component.ts
 ┃ ┣ 📜app.module.ts
 ┃ ┗ 📜transloco.loader.ts
 ┣ 📂assets
 ┃ ┣ 📂i18n
 ┃ ┃ ┣ 📜en.json
 ┃ ┃ ┗ 📜es.json
```

Inside the `feature` module, we can define the `TRANSLOCO_SCOPE` provider and pass an inline loader:

```ts {13} title="feature.module.ts"
export const loader = ['en', 'es'].reduce((acc, lang) => {
  acc[lang] = () => import(`../i18n/${lang}.json`);
  return acc;
}, {});

@NgModule({
  imports: [TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {
        scope: 'scopeName',
        loader
      }
    }
  ],
  declarations: [YourComponent],
  exports: [YourComponent]
})
export class FeatureModule {}
```

:::info
Note that when using an inline loader, the `scope` key is used as the `alias`.
:::

Now we can translate our content using the `scope` we define:

```ts {5} title="my-comp.component.ts"
@Component({
  selector: 'your-comp',
  template: `
    <ng-container *transloco="let t">
      <p>{{ t('scopeName.title') }}</p>
    </ng-container>
  `
})
export class YourComponent {}
```

And lazy-loaded both the `feature` module and its translation files in our application:

```ts title="app.module.ts"
@NgModule({
  declarations: [AppComponent],
  imports: [
    TranslocoModule,
    RouterModule.forRoot([
    {
       path: 'route-name',
       loadChildren: () =>
         import('path/to/feature/module').then( m => m.FeatureModule)
      }
    ])
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

:::info
Note that following the Angular DI rules, it can be done either in a feature module that we lazy-loaded or at the component providers level.
:::
You can find a complete working example that uses [nx](https://github.com/NetanelBasal/transloco-with-nx-libs) here.
